<template>
  <div class="scroll-y columnSS" style="gap: 10px;">
    <!--操作-->
    <div class="rowSS">
      <el-button type="primary" @click="addBtnClick">
        <el-icon style="vertical-align: middle">
          <FolderAdd />
        </el-icon>
        <span style="vertical-align: middle">增加</span>
      </el-button>
    </div>
    <!--表格-->
    <el-table
      border
      :data="menuTreeData"
      row-key="id"
      default-expand-all
    >
      <el-table-column label="菜单">
        <template #default="{ row }">
          {{ row.id }}.{{ row.title }}
        </template>
      </el-table-column>
      <el-table-column label="路径">
        <template #default="{ row }">
          {{ row.prePath }}{{ row.path }}
        </template>
      </el-table-column>
      <el-table-column prop="code" label="key" width="160" />
      <el-table-column label="图标" width="160">
        <template #default="{ row }">
          <ElSvgIcon v-if="row.iconType === 1" :el-svg-name="row.icon" />
          <svg-icon v-else :icon-class="row.icon" class-name="nav-icon" />
          {{ row.icon }}
        </template>
      </el-table-column>
      <el-table-column label="显示" width="80">
        <template #default="{ row }">
          <el-tag v-if="row.hidden === 0 " type="success">显示</el-tag>
          <el-tag v-if="row.hidden === 1 " type="info">隐藏</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="order" label="排序" width="80" />
      <!--点击操作-->
      <el-table-column fixed="right" align="center" label="操作" width="160">
        <template #default="{ row }">
          <el-button text bg type="primary" size="small" @click="tableEditClick(row)">编辑</el-button>
          <el-button text bg type="danger" size="small" @click="tableDelClick(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <MenuForm v-if="showFrom" ref="refMenuForm" :menus="menuTreeData" @hide-comp="hideComp" @form-sub="getMenuTree" />

  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue'
import { FolderAdd } from "@element-plus/icons-vue";
import MenuForm from "./MenuForm.vue";
import ElSvgIcon from "@/components/ElSvgIcon.vue";
import { delMenuReq, getMenuTreeReq } from "@/api/setting";
import {elConfirm, elMessage} from "@/hooks/use-element";

// --- ------
onMounted(() => {
  getMenuTree();
});
// table
const menuTreeData = ref([]);
let getMenuTree = () => {
  getMenuTreeReq().then(res => {
    menuTreeData.value = dealMenuPath(res.data.tree);
  });
};

function dealMenuPath(menus, prePath = "") {
  for (const menu of menus) {
    menu.prePath = prePath;
    if (Object.prototype.hasOwnProperty.call(menu, "children") && menu.children != null && menu.children.length > 0) {
      menu.children = dealMenuPath(menu.children, (prePath + menu.path) === "/" ? "/" : (`${prePath + menu.path  }`));
    }
  }
  return menus;
}

const tableEditClick = (row) => {
  showFrom.value = true;
  nextTick(() => {
    refMenuForm.value.showModal(row.id, row);
  });
};

const tableDelClick = (row) => {
  elConfirm("确定", `您确定要删除【${row.title}】吗？`).then(() => {
    delMenuReq(row.id).then(() => {
      elMessage(`【${row.title}】删除成功`);
      getMenuTree()
    })
  }).catch(() => {
  });
};
// form
let showFrom = ref(false);
let refMenuForm = ref();

const hideComp = () => {
  showFrom.value = false;
};
// 操作
const addBtnClick = () => {
  showFrom.value = true;
  nextTick(() => {
    refMenuForm.value.showModal();
  });
};

</script>

<style scoped lang="scss">
/*详情*/
.detail-container {
  flex-wrap: wrap;
}

.detail-container-item {
  min-width: 40%;
  margin-bottom: 20px;
}
</style>
